<script setup lang="ts">
import { ref, onActivated } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import { useStorage } from '@/hooks/web/useStorage'
import { useRouter } from 'vue-router'
import { getKey, updateLine } from '@/api/user'
// import JSEncrypt from 'jsencrypt/bin/jsencrypt'
import { showDialog } from 'vant'
const { clear } = useStorage()
const { push } = useRouter()
const userInfo = ref(appStore.getUserInfo)

// const limitExchange = () => {
//   getKey(userInfo.value.id).then((res) => {
//     let encrypt = new JSEncrypt()
//     encrypt.setPublicKey(res.data)
//     let encrypted = encrypt.encrypt(
//       JSON.stringify({
//         linesNum: 10
//       })
//     )
//     updateLine({
//       content: encrypted,
//       userId: userInfo.id
//     }).then((res) => {
//       showDialog({ title: '提示', message: '兑换成功' })
//     })
//   })
// }
onActivated(() => {
  userInfo.value = appStore.getUserInfo
})
const logout = () => {
  clear()
  appStore.setPageData('newTask', null)
  appStore.setPageData('myTask', null)
  appStore.setUserInfo(null)
  push({
    name: 'login'
  })
}
const gotoRote = (name: string) => {
  push({
    name
  })
}
</script>

<template>
  <van-nav-bar title="个人中心" fixed placeholder> </van-nav-bar>
  <div class="mineBox">
    <van-cell-group inset style="margin-bottom: 16px">
      <van-cell
        size="large"
        title="星拓宝"
        :label="userInfo.name + '：' + userInfo.username"
        is-link
        center
        @click="gotoRote('userInfo')"
      >
        <template #icon>
          <img
            src="~@/assets/img/logo.png"
            style="width: 40px; height: 40px; margin-right: 10px"
            alt=""
          />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group inset>
      <van-cell size="large" title="修改密码" is-link center @click="gotoRote('changePassword')" />
      <van-cell size="large" title="我的协议" is-link center @click="gotoRote('agreement')" />

      <!-- <van-cell
        size="large"
        @click="limitExchange"
        v-if="userInfo.roleSign.indexOf('agent') != -1"
        title="额度兑换"
        is-link
        center
    /> -->
    </van-cell-group>
    <div class="btnBox">
      <van-button round block type="primary" @click="logout"> 退出登录 </van-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mineBox {
  padding: 16px 0;
}
.btnBox {
  padding: 32px 16px;
}
</style>
